/*
 * @Description: 
 * @Author: 韩双双
 * @Date: 2021-04-22 19:36:36
 * @LastEditTime: 2021-04-27 15:00:05
 * @LastEditors: 韩双双
 */
import useStore from '@/context/useStore'
import React, { useEffect,} from 'react';
import { observer } from 'mobx-react-lite';
import styles from './category.less';
import { useHistory } from 'umi';

import {
    AppstoreOutlined
} from '@ant-design/icons'; 


function category() {
    let { article } = useStore()
    let history = useHistory()
    
    useEffect(() => {
        article.getArticlecategory()
    }, [])
    
    const clasfly=(ID:string)=>{
        article.getCategoryDetail(ID)
        history.push('/index/fe')
    }
    return (
        <div className={styles.category}>
            <h3><AppstoreOutlined />文章分类</h3>
            <div>
                {
                    article.category.map(item => {
                        return <p key={item.id} onClick={()=>clasfly(item.value)}>
                            <span>{item.label}</span>
                            <span>共{item.articleCount}篇文章</span>
                        </p>
                    })
                }

            </div>
        </div>
    )
}
export default observer(category)



